<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>员工管理</title>
    <#include "../common/link.ftl" >
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include "../common/navbar.ftl" >
    <!--菜单回显-->
    <#assign currentMenu="employee"/>
    <#include "../common/menu.ftl" >
    <div class="content-wrapper">
        <section class="content-header">
            <#if entity??>
            <h1>员工编辑</h1>
            <#else >
            <h1>员工新增</h1>
            </#if>
        </section>
        <section class="content">
            <div class="box">
                <br>
                <#-- 表单 -->
                <form class="form-horizontal" action="/employee/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" value="${(entity.id)!}" name="id">
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="name" class="col-sm-2 control-label">用户名：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="name" name="name" value="${(entity.name)!}"
                                   <#if entity??>readonly</#if>
                                   placeholder="请输入用户名">
                        </div>
                    </div>

                    <#-- 如果是编辑，则不显示密码部分 -->
                    <#if !entity?? >
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码：</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control" id="password" name="password"
                                       placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="repassword" class="col-sm-2 control-label">验证密码：</label>
                            <div class="col-sm-6">
                                <input type="password" class="form-control" id="repassword" name="repassword"
                                       placeholder="再输入一遍密码">
                            </div>
                        </div>
                    </#if>

                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">电子邮箱：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="email" name="email" value="${(entity.email)!}"
                                   placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="age" class="col-sm-2 control-label">年龄：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="age" name="age" value="${(entity.age)!}"
                                   placeholder="请输入年龄">
                        </div>
                    </div>

                    <#-- 部门下拉框 -->
                    <div class="form-group">
                        <label for="dept" class="col-sm-2 control-label">部门：</label>
                        <div class="col-sm-6">
                            <select class="form-control" id="dept" name="deptId">
                                <#list departments! as dept>
                                    <option value="${dept.id}">${dept.name}</option>
                                </#list>
                            </select>
                        </div>
                    </div>
                    <#--部门下拉框回显-->
                    <script>
                        $(function () {
                            $('#dept').val('${(entity.deptId)!}');
                        });
                    </script>

                    <#-- 超级管理员勾选框 -->
                    <div class="form-group">
                        <label for="admin" class="col-sm-2 control-label">超级管理员：</label>
                        <div class="col-sm-6" style="margin-left: 15px;">

                            <#-- 由于 w3c特性，checkbox 不勾选的话是不传值过去的，这里用个隐藏域，默认传 false，勾了的话会覆盖传 true -->
                            <#--<input name="admin" type="hidden" value="false">-->
                            <input type="checkbox" id="admin" name="admin" class="checkbox">
                            <#-- 回显，其实不用写的这么麻烦，自带的懒得改 -->
                            <#if (entity.admin)?? && entity.admin >
                                <script>
                                    console.log("是管理员");
                                    $("#admin").prop("checked", true);
                                </script>
                            </#if>
                        </div>
                    </div>

                    <#-- 角色多选框 -->
                    <div class="form-group " id="role">
                        <label for="role" class="col-sm-2 control-label">分配角色：</label><br/>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-sm-2 col-sm-offset-2">

                                <#-- 所有角色多选框 -->
                                <select multiple class="form-control allRoles" size="15">
                                    <#list roles! as role>
                                        <option value="${role.id}">${role.name}</option>
                                    </#list>
                                </select>
                            </div>

                            <#-- 移动操作按钮 -->
                            <div class="col-sm-1" style="margin-top: 60px;" align="center">
                                <div>
                                    <a type="button" class="btn btn-primary  " style="margin-top: 10px" title="右移动"
                                       onclick="moveSelected('allRoles', 'selfRoles')">
                                        <span class="glyphicon glyphicon-menu-right"></span>
                                    </a>
                                </div>
                                <div>
                                    <a type="button" class="btn btn-primary " style="margin-top: 10px" title="左移动"
                                       onclick="moveSelected('selfRoles', 'allRoles')">
                                        <span class="glyphicon glyphicon-menu-left"></span>
                                    </a>
                                </div>
                                <div>
                                    <a type="button" class="btn btn-primary " style="margin-top: 10px" title="全右移动"
                                       onclick="moveAll('allRoles', 'selfRoles')">
                                        <span class="glyphicon glyphicon-forward"></span>
                                    </a>
                                </div>
                                <div>
                                    <a type="button" class="btn btn-primary " style="margin-top: 10px" title="全左移动"
                                       onclick="moveAll('selfRoles', 'allRoles')">
                                        <span class="glyphicon glyphicon-backward"></span>
                                    </a>
                                </div>
                            </div>

                            <div class="col-sm-2">

                                <#-- 选中的角色 的多选框 -->
                                <select multiple class="form-control selfRoles" size="15" name="roleIds">
                                    <#list (entity.roles)! as role>
                                        <option value="${role.id}">${role.name}</option>
                                    </#list>
                                </select>
                            </div>
                        </div>
                    </div>

                    <#-- js -->
                    <script>
                        //左移动或右移动 按钮(部分左移)
                        function moveSelected(src, target) {
                            $('.' + src + ' option:selected').appendTo($('.' + target));
                        }

                        //全左移动或全右移动按钮
                        function moveAll(src, target) {
                            $('.' + src + ' option').appendTo($('.' + target));
                        }

                        $(function () {
                            //是超级管理员的话不需要分配角色，拥有所有权限，角色ids不用传
                            if ($('#admin').prop('checked')) {
                                $('#role').hide();
                                //$('.selfRoles').attr("disabled", true);
                            }

                            //给超级管理员勾选框绑定事件，是超级管理员的话不需要分配角色，拥有所有权限，角色ids不用传
                            $('#admin').on('change', function () {
                                console.log(this.checked);
                                $('#role').toggle(!this.checked);
                                if (this.checked) {
                                    //$('.selfRoles').attr("disabled", true);
                                } else {
                                    //$('.selfRoles').attr("disabled", false);
                                }
                            });

                            //保存按钮 点击后 提交表单
                            $('#submitBtn').on('click', function () {
                                //提交前，把右边的多选框（给员工分配角色）全部选中
                                $('.selfRoles option').prop('selected', true);

                                //提交前，根据w3c特性，checkbox 不勾选的话会不生效，这里做处理，超管勾选框不勾选的话传false
                                if (!$("#admin").is(':checked')) {
                                    $("#admin").after('<input name="admin" type="hidden" value="false">');
                                    console.log($("#admin").prop('checked'));
                                }
                                //表单提交
                                /*$('#editForm').ajaxSubmit(function (data) {
                                    checkData(data, "/employee/list.do");
                                });*/
                                $('#editForm').submit();

                            });

                            //去重处理：左边供选择的所有角色多选框作去重处理，主要是编辑员工的话，右边已选角色已经有了，左边可供选择的就不该再有
                            {
                                var allRoles = $('.allRoles option');
                                var selfRoles = $('.selfRoles option');
                                //把已选的遍历获取到已选的ids，然后全部的角色多选框里做遍历去重，用
                                var selfRolesIds = [];
                                selfRoles.each(function (index, dom) {
                                    selfRolesIds.push($(dom).val());
                                });
                                allRoles.each(function (index, dom) {
                                    if ($.inArray($(dom).val(), selfRolesIds) != -1) {
                                        $(dom).remove();
                                    }
                                });
                            }

                            //表单验证
                            $("#editForm").validate({
                                rules : {
                                    //是编辑的话不需要验证用户名
                                    <#if !entity??>
                                    name: {
                                        required:true,
                                        rangelength:[2,10],
                                        remote:{
                                            url:"/employee/checkname.do",
                                            type:"post",
                                            data:{ //发起请求参数
                                                name:function(){
                                                    return $("#name").val();
                                                }/*,
                                                id:function () {
                                                    //需要id：原因：编辑时，用户已经存在了
                                                    //需要使用id来区分编辑还是添加操作
                                                    return $("#id").val();
                                                }*/
                                            }
                                        }
                                    },
                                    </#if>
                                    password: {
                                        required:true
                                    },
                                    repassword: {
                                        equalTo:"#password",
                                        required:true
                                    },
                                    age: {
                                        digits: true,
                                        range: [0, 200]
                                    }
                                },
                                //验证失败后提示
                                messages: {
                                    //可以不写，使用默认的
                                    name: {
                                        required:"用户名必填",
                                        rangelength:"用户名长度介于{0}-{1}之间",
                                        remote:"用户名已存在"
                                    },
                                    password: {
                                        required:"密码必填"
                                    },
                                    repassword: {
                                        equalTo:"再次输入密码不匹配",
                                        required:"再次输入密码必填"
                                    },
                                    age: {
                                        digits: "请输入整数",
                                        range: "范围介于{0}-{1}之间"
                                    }
                                },
                                //错误的样式
                                errorClass: "text-danger",
                                //异步请求提交表达的处理
                                submitHandler:function () { //通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交
                                    //alert("ok");
                                    $('#editForm').ajaxSubmit(function (data) {
                                        checkData(data, "/employee/list.do");
                                    });
                                }
                            });

                        });
                    </script>

                    <div class="form-group">
                        <div class="col-sm-offset-1 col-sm-6">
                            <button id="submitBtn" type="button" class="btn btn-primary">保存</button>
                            <button type="reset" class="btn btn-danger">重置</button>
                        </div>
                    </div>
                    <br>
                </form>

            </div>
        </section>
    </div>
    <#include "../common/footer.ftl" >
</div>
</body>
</html>
